var SummarySearchForm = function () {
  var template = /* html */ `
    <sys-common-search request-url="materialSelectFilter/getMaterialSelectData" :request-data="requestData" :search="search"
      :search-field="searchField" label-width="100px" input-width="170px" ref="searchForm">
      <template slot="prepend">
        <el-form-item label="制单日期">
          <el-date-picker style="width:219px" v-model="search.startDate" value-format="timestamp" :editable="false"
            :clearable="false" :picker-options="startDateOption"></el-date-picker>
          -
          <el-date-picker style="width:219px" v-model="search.endDate" value-format="timestamp" :editable="false"
            :clearable="false" :picker-options="endDateOption"></el-date-picker>
        </el-form-item>
      </template>
      <template slot="append">
        <el-form-item label="出入库">
          <el-select style="width:170px" v-model="search.type" clearable placeholder="请选择出入库类型">
            <el-option v-for="(type,index) in typeList" :key="'type_'+index" :label="type.label" :value="type.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓库">
          <el-select style="width:170px" clearable v-model="search.warehouseType">
            <el-option v-for="(warehouse,index) in warehouseTypeList" :key="'warehouse_'+index" :label="warehouse.label" :value="warehouse.value">
            </el-option>
          </el-select>
        </el-form-item>
      </template>
    </sys-common-search>
  `;

  return {
    mixins:[datePickerOptionsMixin('startDate','endDate')],

    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data: function () {
      var self = this;
      return {
        searchField: ['materialName', 'model', 'color', 'providerName', 'materialDept','providerNo'],
        typeList: i18n.getDropDown('warehouseInOutRecord.type', [1, 2]),
        warehouseTypeList: i18n.getDropDown('warehouseInOutRecord.warehouseType', [4, 5, 2, 3, 6])
      };
    },

    computed: {
      requestData: function () {
        return {
          type: 5,
          warehouseType: this.search.warehouseType
        };
      }
    },

    watch: {
      requestData: function (newData, oldData) {
        if (newData.warehouseType === oldData.warehouseType) {
          return;
        }
        var self = this;
        this.$nextTick(function () {
          self.$refs['searchForm'].resetDropdownData();
        });
      }
    },

    components: {
      SysCommonSearch: SysCommonSearch
    },

    template: template
  };
}();
